<template>
  <view class="balance-container">
    <!-- 顶部渐变背景，仅作为背景，不自定义导航栏 -->
    <view class="top-gradient" />

    <scroll-view scroll-y class="scroll-view">
      <view class="content-area">
        <!-- 顶部提示 -->
        <view class="notice">
          <uv-icon name="info-circle" size="18" color="#36cfc9" />
          <text class="notice-text">含赠送金额{{ giftAmount.toFixed(2) }}元，赠送金额不可提现</text>
        </view>

        <!-- 余额卡片 -->
        <view class="balance-card">
          <text class="card-subtitle">我的余额</text>
          <text class="card-amount">{{ balanceAmount.toFixed(2) }}</text>

          <view class="card-actions">
            <uv-button :custom-style="btnGhostStyle" text="充值" @click="handleRecharge" />
            <uv-button :custom-style="btnPrimaryStyle" text="提现" @click="handleWithdraw" />
          </view>

          <text class="tips">温馨提示：最低需充值1000元才可下单</text>
        </view>

        <!-- 财款记录 -->
        <view class="record-section">
          <view class="section-title">财款记录</view>

          <!-- 筛选标签 -->
          <view class="filters">
            <view v-for="(tab, idx) in tabs" :key="idx" :class="['filter-tag', { active: currentTab === tab.value }]"
              @click="switchTab(tab.value as 'completed' | 'apply' | 'pass')">
              <text>{{ tab.label }}</text>
            </view>
          </view>

          <!-- 列表 -->
          <view class="record-list">
            <view v-for="(item, idx) in filteredRecords" :key="idx" class="record-item">
              <view class="record-left">
                <view class="icon-wrap">
                  <uv-icon name="red-packet" :color="'#FF6B35'" />
                </view>
                <view class="record-info">
                  <text class="record-title">提现已到账</text>
                  <text class="record-time">通过时间：{{ formatDateTime(item.createtime) }}</text>
                </view>
              </view>
              <text class="record-amount">¥{{ item.withdraw }}</text>
            </view>

            <view v-if="filteredRecords.length === 0" class="empty">
              <uv-empty mode="list" text="暂无记录" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue'
import { UserInfoManager } from '@/utils/userInfo'
import { formatDateTime } from '@/utils/dateTime'
import { useRequest } from '@/api'
const { GET_LIST_FUKUAN } = useRequest()
const userInfo = UserInfoManager.getUserInfo()
// 金额
const balanceAmount = ref(0)
const giftAmount = ref(0)

// 筛选标签
const tabs = [
  { label: '已提现', value: 'completed' },
  { label: '审核中', value: 'apply' },
  { label: '待打款', value: 'pass' }
]
const currentTab = ref<'completed' | 'apply' | 'pass'>('completed')

const filteredRecords = ref([])

// 按钮样式
const btnPrimaryStyle = {
  width: '320rpx',
  height: '88rpx',
  borderRadius: '44rpx',
  backgroundColor: '#FF6B35',
  color: '#fff'
}
const btnGhostStyle = {
  width: '320rpx',
  height: '88rpx',
  borderRadius: '44rpx',
  backgroundColor: '#fff6f0',
  color: '#FF6B35',
  border: '2rpx solid #FF6B35'
}

const switchTab = (val: 'completed' | 'apply' | 'pass') => {
  currentTab.value = val
  getList()
}

const handleRecharge = () => {
  uni.navigateTo({
    url: '/user/mine/topup'
  })
}

const handleWithdraw = () => {
  if (balanceAmount.value < 1000) {
    uni.showToast({ title: '余额不足以提现', icon: 'none' })
    return
  }
  uni.navigateTo({
    url: '/user/mine/withdraw'
  })
}
const total = ref(0)
const current = ref(1)
const getList = async () => {
  const params = {
    isdriver: UserInfoManager.lastrole(),
    status: currentTab.value,
    sort: "id",
    order: "desc",
    page: current.value,
    page_size: 999
  }
  const res = await GET_LIST_FUKUAN(params)
  if (res.code === 1) {
    
    filteredRecords.value = res.data.data
    total.value = res.data.total
  }

}
onMounted(()=>{
  getList()
  balanceAmount.value = Number(userInfo.balance)
  giftAmount.value = Number(userInfo.giftbalance)
})

</script>

<style lang="scss" scoped>
.balance-container {
  min-height: 100vh;
  background: #f6f7f9;
  position: relative;
}

.top-gradient {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 320rpx;
  background: linear-gradient(180deg, #ffe3c9 0%, #fff6ed 100%);
  z-index: 0;
}

.scroll-view {
  position: relative;
  z-index: 1;
}

.content-area {
  padding: 24rpx;
}

.notice {
  display: flex;
  align-items: center;
  gap: 12rpx;
  background: #e6fffb;
  border: 1rpx solid #b5f5ec;
  color: #08979c;
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
}

.notice-text {
  font-size: 26rpx;
}

.balance-card {
  margin-top: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
  padding: 32rpx 24rpx;
  text-align: center;
}

.card-subtitle {
  font-size: 28rpx;
  color: #666;
}

.card-amount {
  display: block;
  margin: 18rpx 0 28rpx;
  font-size: 72rpx;
  font-weight: 700;
  color: #1f1f1f;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.tips {
  display: block;
  margin-top: 18rpx;
  font-size: 24rpx;
  color: #999;
}

.record-section {
  margin-top: 28rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.filters {
  display: flex;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.filter-tag {
  padding: 14rpx 24rpx;
  border-radius: 28rpx;
  background: #f5f5f5;
  color: #666;
  font-size: 26rpx;
}

.filter-tag.active {
  background: #fff0e6;
  color: #ff6b35;
  border: 1rpx solid #ff6b35;
}

.record-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.record-item:last-child {
  border-bottom: none;
}

.record-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.icon-wrap {
  width: 56rpx;
  height: 56rpx;
  background: #fff5f0;
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-info {
  display: flex;
  flex-direction: column;
}

.record-title {
  font-size: 30rpx;
  color: #1f1f1f;
}

.record-time {
  font-size: 24rpx;
  color: #8c8c8c;
  margin-top: 6rpx;
}

.record-amount {
  font-size: 32rpx;
  color: #1f1f1f;
  font-weight: 700;
}

.empty {
  padding: 40rpx 0;
}
</style>
